<template>
  <div>
    <div class="books">
      <div class="booksType">
		<p class="fenlei">分类:</p>
        <ul>
          <li class="b-li">
			  <div class="d_left" @click="xuanhuan">玄幻</div>
			  <div class="d_right" @click="tiyu">体育</div>
		  </li>
		  <li>
			  <div class="d_left" @click="lishi">历史</div>
			  <div class="d_right" @click="dushi">都市</div>
		  </li>
		  <li>
			  <div class="d_left" @click="xianxia">仙侠</div>
			  <div class="d_right" @click="kehuan">科幻</div>
		  </li>
		  <li>
			  <div class="d_left" @click="youxi">游戏</div>
			  <div class="d_right"></div>
		  </li>
		  <li>
			  <div class="d_left"></div>
			  <div class="d_right" @click="all">全部作品</div>
		  </li>
        </ul>
      </div>
      <navbar-swiper class="booksSwiper"></navbar-swiper>
      <div class="booksTop10">
		<p class="fenlei">热度榜：</p>
        <ul v-for="(item,index) of hot8" :key="index">
          <router-link :to="{path:'/hotchapter',query:{title:item.title}}"><li class="top8 border-bottom" >{{item.title}}</li></router-link>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import NavbarSwiper from '../../../common/swiper/Swiper.vue'
import axios from 'axios'

export default {
  name:'Navbar',
  data(){
    return {
	  hot8:[]
    }
  },
  components:{
    NavbarSwiper
  },
	methods:{
		xuanhuan(){
			var title = '玄幻'
			axios.post(('http://localhost:3000/api/user/searchBookType'),{
				title:title
			},{}).then((response)=>{
				this.$router.push({path:'/booktype',query:{title:title}})
				// console.log(response.data)
			})
		},
		tiyu(){
			var title = '体育'
			axios.post(('http://localhost:3000/api/user/searchBookType'),{
				title:title
			},{}).then((response)=>{
				this.$router.push({path:'/booktype',query:{title:title}})
				// console.log(response.data)
			})
		},
		lishi(){
			var title = '历史'
			axios.post(('http://localhost:3000/api/user/searchBookType'),{
				title:title
			},{}).then((response)=>{
				this.$router.push({path:'/booktype',query:{title:title}})
				// console.log(response.data)
			})
		},
		dushi(){
			var title = '都市'
			axios.post(('http://localhost:3000/api/user/searchBookType'),{
				title:title
			},{}).then((response)=>{
				this.$router.push({path:'/booktype',query:{title:title}})
				// console.log(response.data)
			})
		},
		xianxia(){
			var title = '仙侠'
			axios.post(('http://localhost:3000/api/user/searchBookType'),{
				title:title
			},{}).then((response)=>{
				this.$router.push({path:'/booktype',query:{title:title}})
				// console.log(response.data)
			})
		},
		kehuan(){
			var title = '科幻'
			axios.post(('http://localhost:3000/api/user/searchBookType'),{
				title:title
			},{}).then((response)=>{
				this.$router.push({path:'/booktype',query:{title:title}})
				// console.log(response.data)
			})
		},
		youxi(){
			var title = '游戏'
			axios.post(('http://localhost:3000/api/user/searchBookType'),{
				title:title
			},{}).then((response)=>{
				this.$router.push({path:'/booktype',query:{title:title}})
				// console.log(response.data)
			})
		},
		all(){
			this.$router.push('/allbooktype')
		},
		getMingZhuBooksTitle(){
			axios.post(('http://localhost:3000/api/user/mingzhubookstitle'),{
				// title:title
			},{}).then((response)=>{
				// console.log(response.data)
				var d = []
				for(var i = 0;i < 8;i++){
					var dat = JSON.stringify(response.data[i])
					// console.log(dat)
					var dat2 = JSON.parse(dat)
					// console.log(dat2)
					d.push(dat2)
					// console.log(d)
				}
				var c= this.hot8 = d
				// console.log(response.data)
			})
		}
	},
	mounted(){
		this.getMingZhuBooksTitle()
	}
}
</script>
    
<style lang="stylus" scoped>
  .books{
	width :100%;
	height :0;
	padding-bottom :20.5%;
  }
    
  .booksType{
	width :15%;
	height :0;
	padding-bottom :20.5%;
	float :left;
	padding-top :.2rem;
	margin-left :5%;
  }
  .fenlei {
	font-size :18px;
	font-weight :600;
	padding-left :15px;
  }
  .d_left{
	width :48%;
	float: left;
	text-align :center;
	height :50px;
	line-height :50px;
  }
  .d_left:hover{
	background: #CACACA;
	cursor :pointer;
  }
  .d_right{
	width :48%;
	float :right;
	text-align :center;
	height :50px;
	line-height :50px;
  }
  .d_right:hover{
    background: #CACACA;
	cursor :pointer;
  }
  .booksSwiper{
	width :60%;
	height: 0;
	padding-bottom :20.5%;
	float :left;
  }
  .booksTop10{
	width :25%;
	height :0;
	padding-bottom :20.5%;
	float left;
	padding-top :.2rem;
	margin-right :5%;
  }
  .booksTop10>ul{
	padding-left :25px;
  }
  .top8 {
	height:30px;
	line-height :30px;
	text-align :center;
	letter-spacing :3px;
	font-size :16px;
	font-weight :600;
  }
  .top8:hover{
	background: #CACACA;
	cursor :pointer;
  }
	  
</style>
